
<template>
    <div class="header-box">
        <div class="header-cont page-cont-box">
            <div class="company-box" @click.stop="toPage('home')">
                <div class="comp-box">
                    <el-image class="comp-img" :src="brandvImg" fit="contain" />
                </div>
                <span class="comp-txt" v-lang="{lang: controlSto.language, lgid: '-2'}"></span>
            </div>
            <div class="right-box">
                <div class="head-item-box first-item">
                    <div class="head-item-txt" v-lang="{lang: controlSto.language, lgid: -16}" @click.stop="toPage('home')">Home</div>
                </div>
                <div class="head-item-box">
                    <!-- <el-dropdown trigger="click" popper-class="header-item-drop-box"> -->
                    <el-dropdown popper-class="header-item-drop-box">
                        <span class="head-drop-txt">
                            <!-- <span :key="'bro_txt_' + controlSto.language" v-lang="{lang: controlSto.language, lgid: 2, list: controlSto.langList}">Browse</span> -->
                            <span :key="'bro_txt_' + controlSto.language" v-lang="{lang: controlSto.language, lgid: -17}">Browse</span>
                            <el-icon class="drop-arrow-img"><CaretBottom /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu class="head-drop-cont">
                                <!-- browseList -->
                                <el-dropdown-item class="drop-item" v-for="item in dataObj.browseList" :key="'browse_' + item.id" 
                                    @click.stop="toJump(item)">
                                    {{ langTxt(controlSto.language, item.id) }}
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <div class="head-item-box">
                    <el-dropdown popper-class="header-item-drop-box">
                        <span class="head-drop-txt">
                            <!-- <span :key="'bro_txt_' + controlSto.language" v-lang="{lang: controlSto.language, lgid: 8, list: controlSto.langList}"></span> -->
                            <span :key="'bro_txt_' + controlSto.language" v-lang="{lang: controlSto.language, lgid: -39}"></span>
                            <el-icon class="drop-arrow-img"><CaretBottom /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu class="head-drop-cont">
                                <!-- combList -->
                                <el-dropdown-item class="drop-item" v-for="item in dataObj.combList" :key="'comb_' + item.id" @click.stop="toJump(item)">
                                    <span v-lang="{lang: controlSto.language, lgid: item.firKey}"></span>
                                    <!-- <span> - </span>
                                    <span v-lang="{lang: controlSto.language, lgid: item.secKey}"> - </span> -->
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>

                <div class="head-item-box">
                    <div class="head-item-txt" @click.stop="toPage('admet')">ADMET</div>
                </div>
                <div class="head-item-box last-item">
                    <div class="lang-btn" v-lang="{lang: (3 - controlSto.language), lgid: '-1'}" @click.stop="toggleLange"></div>
                </div>
              
            </div>
        </div>
        <!-- <span>{{langTxt(controlSto.language, -2)}}</span>
        <span>{{controlSto.language}}</span> -->
    </div>
</template>

<script setup>
    import { ref, reactive, onBeforeMount } from 'vue'
	import { useRouter } from 'vue-router'
    import { controlStore } from '@/stores/control'
    import { langTxt } from '@/utils/util'
    import brandvImg from '@/assets/img/logo-tran.png'

    // view/src/assets/img/logo-tran.png view/src/assets/img/logo-red.png

    const controlSto = controlStore();
	const router = useRouter();


    const dataObj = reactive({
        browseList: [
            {
                id: -18,
                name: 'pressearch',
            }, {
                id: -19,
                name: 'herbsearch',
            }, {
                id: -20,
                name: 'ingrsearch',
            }, {
                id: -21,
                name: 'disesearch',
            }
        ],
        combList: [
            {
                id: 8,
                firKey: -125,
                // secKey: -19,
                name: 'herbherb',
            }, {
                id: 9,
                firKey: -126,
                // secKey: -20,
                name: 'ingringr',
            }, {
                id: 10,
                firKey: -127,
                // secKey: -21,
                name: 'presdise',
            }, {
                id: 11,
                firKey: -128,
                // secKey: -21,
                name: 'herbdise',
            }, {
                id: 12,
                firKey: -129,
                // secKey: -21,
                name: 'ingrdise',
            }
        ]
    });

    const toJump = (item) => {
        if(item.name && router.currentRoute.value.name != item.name) {
            router.push({ name: item.name, query: {origin: 'header'}});
        }
    };
    const toPage = (rname) => {
        if(router.currentRoute.value.name != rname) {
            router.push({ name: rname});
        }
    };
    // 切换语言
    const toggleLange = () => {
        controlSto.setLang(3 - controlSto.language);
    };
</script>


<style lang="scss" scoped>
    .header-box {
        display: flex;
        justify-content: center;
        height: 60px;
        color: #fff;
        background-color: #CB4042;
        .header-cont {
            display: flex;
            // width: 1400px;
            justify-content: space-between;    
            align-items: center;
            .company-box {
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                .comp-box {
                    display: inline-block;
                    margin-right: 8px;
                    .comp-img {
                        height: 30px;
                    }
                }
                .comp-txt {
                    font-size: 20px;
                    font-weight: bold;
                    vertical-align: top;
                }
            }
        }
        .right-box {
            display: flex;
            .head-item-box {
                padding: 0 10px;
                margin-left: 10px;
                font-size: 16px;
                line-height: 60px;
                font-weight: bold;
                cursor: pointer;
                &.first-item {
                    margin-left: 0;
                }
                &.last-item {
                    padding-right: 0;
                }
                .lang-btn {
                    display: inline-block;
                    height: 24px;
                    line-height: 26px;
                    padding: 0 6px;
                    border: 1px solid #fff;
                    border-radius: 5px;
                }
                .drop-arrow-img {
                    position: relative;
                    top: 2px;
                    margin-left: 2px;
                }
                .head-drop-txt {
                    position: relative;
                    height: 60px;
                    padding: 0 10px;
                    line-height: 60px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #fff;
                    &:hover {
                        background-color: #B42828;
                    }
                    &:focus-visible {
                        outline: none;
                    }
                }
                .head-item-txt {
                    height: 60px;
                    padding: 0 10px;
                    line-height: 60px;
                    &:hover {
                        background-color: #B42828;
                    }
                }
            }
        }
    }
</style>



<style lang="scss">
    .header-item-drop-box {
        .head-drop-cont {
            .drop-item {
                min-width: 150px;
                padding: 8px;
                text-align: center;
                border-bottom: 1px solid #ddd;
                font-size: 14px;
                font-weight: 300;
                color: #333;
                cursor: pointer;
                display: block;
                &:hover {
                    // font-weight: bolder;
                    font-weight: bolder;
                    // color: rgb(201, 63, 76);
                    color: #C7802D;
                    background-color: #FAFAFA;
                }
            }
        }
        // .el-popper__arrow {
        //     display: none;
        // }
    }
    
</style>
